import React from 'react';
import { toJS } from 'mobx';
import { inject, observer } from 'mobx-react';
import { Echarts, Button, WhiteSpace, Icon, Popover, Card, Tools } from 'weaver-mobile';
import { withRouter, Route } from 'react-router-dom';
import { SearchAdvanced, TabPage, RouteLayout, ListViewPage } from 'weaver-mobile-page';
import SellsReprtStore from '../../stores/report/SellsReprtStore';
import CustomerCard from '../card/Customer/index';
import ChanceCard from '../card/Chance/index';
const Item = Popover.Item;
const getLabel = Tools.getLabel;

@withRouter
@observer
export default class SellsReport extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            sellsReprtStore: new SellsReprtStore(),

            tabs: [
                { key: 'addCustomersCount', title: getLabel(501716,'新增客户数') },
                { key: 'addSellsCount', title: getLabel(501717,'新增商机数') },
                { key: 'customerContactCount', title: getLabel(501718,'客户联系数') },
                { key: 'sellsContactCount', title: getLabel(501719,'商机反馈数') }
            ],

            selected: '',
        };
    }

    componentWillMount() {
        this.state.sellsReprtStore.doNew(this);
    }

    componentDidMount() {
        this.state.sellsReprtStore.doInit();
    }

    componentWillUnmount() {
        this.state.sellsReprtStore.doClear();
    }

    render() {
        const { history } = this.props;
        const { sellsReprtStore, tabs } = this.state;
        const { search, sellChanceSearchStr, list, tabSelecteParams, chartOption, detailLayout, rowId, ContactListComp } = sellsReprtStore;
        const tabProps = {

            onChange: (tab) => {
                sellsReprtStore.onTabChange(tab)
            },
            page: tabSelecteParams.reporttype
        };

        return (
            <div className="crm-homepage crm-sellsreport" style={{ height: "100%" }}>

                <TabPage
                    className="tab-page-example"
                    btns={[]}
                    span={[4, 0]}
                    tabs={tabs}
                    tabProps={tabProps}
                    defaultTabBarProps={{ page: 4 }}
                />
                <WhiteSpace size="md" />
                <Card full>
                    <Card.Header
                        title={<span style={{ marginLeft: "5px", whiteSpace: "nowrap" }}>{getLabel(504027,'统计图表')}</span>}
                        extra={<span onClick={() => history.push(search.path)}>{sellChanceSearchStr}</span>}
                    />
                    <Card.Body>
                        <div>
                            <div style={{ height: 230 }}>
                                <Echarts ref="chart1" option={toJS(chartOption)} useDefault={false} />
                            </div>
                            <SearchAdvanced
                                store={search}
                                onChange={(condition, value) => sellsReprtStore.getSellChanceSearchValue(value)}
                                onSubmit={() => sellsReprtStore.getHpSellsInfo()}
                                onReset={() => sellsReprtStore.getHpSellsReset()}
                            />
                        </div>
                    </Card.Body>
                </Card>

                <WhiteSpace size="md" />

                {(tabSelecteParams.reporttype === 'addSellsCount' || tabSelecteParams.reporttype === 'addCustomersCount') ?
                   <div className=''>
                        <ListViewPage.Normal
                            store={list}
                            onRowClick={(params) => {sellsReprtStore.setRowId(params.randomFieldId) }}
                        />
                    </div>
                    :
                    <div>
                        {ContactListComp}
                    </div>
                }


                {detailLayout.init && <Route
                    key={detailLayout.id}
                    path={detailLayout.path}
                    render={() => {
                        let detailContent;
                        if (tabSelecteParams.reporttype === "addCustomersCount") {
                            detailContent = <CustomerCard params={{ id: rowId, tabPage: "info" }} />;
                        } else if (tabSelecteParams.reporttype === "addSellsCount") {
                            detailContent = <ChanceCard params={{ id: rowId, tabPage: "info" }} />;
                        }
                        return (
                            <RouteLayout getContainer={() => document.getElementById("root")}>
                                <div
                                    key="detailContent"
                                    className="wm-route-layout"
                                >
                                    {detailContent}
                                </div>
                            </RouteLayout>
                        )
                    }}
                />}
            </div>
        );
    }
}